<template>
  <div class="container">
    <tab-helper :paneList="paneList">
      <div slot="1" class="table-content">

        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          :span-method="arraySpanMethod">
          <el-table-column
            prop="title"
            label="">
          </el-table-column>
          <el-table-column label="功能和服务">
            <el-table-column
              prop="l1"
              label="套餐名称">
            </el-table-column>
          </el-table-column>
          <el-table-column label="免费版">
            <el-table-column
              prop="l2"
              label="免费体验套餐">
            </el-table-column>
          </el-table-column>
          <el-table-column label="基础版">
            <el-table-column
              prop="l3"
              label="企业碳核算基础套餐">
            </el-table-column>
            <el-table-column
              prop="l4"
              label="产品碳核算基础套餐">
            </el-table-column>
          </el-table-column>
          <el-table-column label="VIP版">
            <el-table-column
              prop="l5"
              label="企业碳核算VIP套餐">
            </el-table-column>
            <el-table-column
              prop="l6"
              label="产品碳核算VIP套餐">
            </el-table-column>
          </el-table-column>
          <el-table-column label="Pro版">
            <el-table-column
              prop="l7"
              label="Pro套餐">
            </el-table-column>
          </el-table-column>
        </el-table>
        <hr/>

        <!-- 购买选择 -->
        <div class="form">
          <normal-form-plus
            :formModel="formModel"
            :config="config"
            :plus="plus"
            @radioUp="radioUp"/>
        </div>
        <hr/>

        <!-- 拥有的服务列表 -->
        <div class="fu-list">
          <div class="fu-title">你可以享有以下服务</div>
          <div class="fu-body" v-for="item in nowFuList" :key='item'>
            <div class="fu-item">{{ item }}</div>
          </div>
        </div>
        <hr/>

        <!-- 价格及购买按钮 -->
        <div>
          <div class="price-content">
            <div class="price-title">费用：</div>
            <div class="price-num">{{ price }}</div>
          </div>
          <el-button type="primary" class="buy-btn">购买</el-button>
        </div>
      </div>
      <div slot="2" class="table-content">
        <div class="form">
          <normal-form-plus
            :formModel="formModel"
            :config="config"
            :plus="plus"
            @radioUp="radioUp"/>
        </div>
        <hr/>

      </div>
    </tab-helper>

  </div>
</template>

<script>
import TabHelper from '@/components/TabHelper'
import NormalFormPlus from '@/components/NormalFormPlus'

export default {
  components: {
    TabHelper,
    NormalFormPlus
  },

  data() {
    return {
      price: 0,
      taoList: ['免费体验套餐', '企业碳核算基础套餐', '产品碳足迹基础套餐', '企业碳核算VIP套餐', '产品碳足迹VIP套餐', 'Pro套餐'],
      priceList: [0, 1500, 1500, 2500, 2500, 4500],
      yueList: ['1个月', '2个月', '3个月', '4个月', '5个月', '6个月', '7个月', '8个月', '9个月', '10个月', '11个月', '12个月'],
      fuList: [
        ['企业碳核算', '产品碳足迹'],

        ['企业碳核算', '可定制碳报告'],
        ['产品碳足迹', '可定制碳报告'],

        ['企业碳核算', '碳全景大屏', '碳排放仿真', '可定制碳报告', '多语言碳报告', '自定义术语库', '面向PDF的表单自动导入', '智能减排顾问'],
        ['产品碳足迹', '碳全景大屏', '碳排放仿真', '可定制碳报告', '多语言碳报告', '自定义术语库', '面向PDF的表单自动导入', '智能减排顾问'],

        ['企业碳核算', '产品碳足迹', '碳全景大屏', '碳排放仿真', '可定制碳报告', '多语言碳报告', '自定义术语库', '面向PDF的表单自动导入', '智能减排顾问', '基于大语言模型的表单自动联想', '基于图数据库的碳源实时推荐', '碳管理开放平台'],

      ],
      nowFuList: ['企业碳核算', '产品碳足迹'],
      tableData: [
        {title: '系统用量', l1: '套餐人数', l2: '3人', l3: '30人', l4: '30人', l5: '30人', l6: '30人', l7: '不限人数'},
        {
          title: '系统用量',
          l1: '起包时长',
          l2: '7天（上限）',
          l3: '1年起',
          l4: '1年起',
          l5: '1年起',
          l6: '1年起',
          l7: '1年起'
        },
        {
          title: '系统用量',
          l1: '套餐价格',
          l2: '0',
          l3: '1500/月',
          l4: '1500/月',
          l5: '2500/月',
          l6: '2500/月',
          l7: '4500/月'
        },
        {title: '系统功能', l1: '企业碳核算', l2: '✔', l3: '✔', l4: '', l5: '✔', l6: '', l7: '✔'},
        {title: '系统功能', l1: '产品碳足迹', l2: '✔', l3: '', l4: '✔', l5: '', l6: '✔', l7: '✔'},
        {title: '系统功能', l1: '碳全景大屏', l2: '', l3: '', l4: '', l5: '✔', l6: '✔', l7: '✔'},
        {title: '系统功能', l1: '碳排放仿真', l2: '', l3: '', l4: '', l5: '✔', l6: '✔', l7: '✔'},
        {title: '系统功能', l1: '可定制碳报告', l2: '', l3: '✔', l4: '✔', l5: '✔', l6: '✔', l7: '✔'},
        {title: '系统功能', l1: '多语言碳报告', l2: '', l3: '', l4: '', l5: '✔', l6: '✔', l7: '✔'},
        {title: '系统功能', l1: '自定义术语库', l2: '', l3: '', l4: '', l5: '✔', l6: '✔', l7: '✔'},
        {title: '系统功能', l1: '面向PDF的表单自动导入', l2: '', l3: '', l4: '', l5: '✔', l6: '✔', l7: '✔'},
        {title: '系统功能', l1: '基于大语言模型的表单自动联想', l2: '', l3: '', l4: '', l5: '', l6: '', l7: '✔'},
        {title: '系统功能', l1: '基于图数据库的碳源实时推荐', l2: '', l3: '', l4: '', l5: '', l6: '', l7: '✔'},
        {title: '系统功能', l1: '智能减排顾问', l2: '', l3: '', l4: '', l5: '✔', l6: '✔', l7: '✔'},
        {title: '系统功能', l1: '碳管理开放平台', l2: '', l3: '', l4: '', l5: '', l6: '', l7: '✔'},
        {title: '备注', l1: '备注', l2: '', l3: '', l4: '', l5: '', l6: '', l7: ''},
      ],
      paneList: [
        {
          id: '1',
          label: '套餐说明'
        },
        {
          id: '2',
          label: '购买套餐'
        },
      ],
      plus: {
        edit: true,
      },
      formModel: {
        tao: '免费体验套餐',
        time: '1个月'
      },
      config: [
        {
          id: 1,
          items: [
            {
              id: '1',
              type: 'checkbox',
              span: 24,
              model: 'tao',
              name: '套餐选择',
              width: 100,
              props: {
                checkboxs: [{
                  label: '免费体验套餐'
                }, {
                  label: '企业碳核算基础套餐'
                }, {
                  label: '产品碳足迹基础套餐'
                }, {
                  label: '企业碳核算VIP套餐'
                }, {
                  label: '产品碳足迹VIP套餐'
                }, {
                  label: 'Pro套餐'
                }
                ],
              }
            },
          ]
        },
        {
          id: 2,
          items: [
            {
              id: '1',
              type: 'checkbox',
              span: 24,
              model: 'time',
              name: '购买时长',
              width: 100,
              props: {
                checkboxs: [{
                  label: '1个月'
                }, {
                  label: '2个月'
                }, {
                  label: '3个月'
                }, {
                  label: '4个月'
                }, {
                  label: '5个月'
                }, {
                  label: '6个月'
                }, {
                  label: '7个月'
                }, {
                  label: '8个月'
                }, {
                  label: '9个月'
                }, {
                  label: '10个月'
                }, {
                  label: '11个月'
                }, {
                  label: '12个月'
                },
                ],
              }
            },
          ]
        },
      ],
    }
  },
  methods: {
    arraySpanMethod(rowItem) {
      var row = rowItem.row
      var col = rowItem.col
      var columnIndex = rowItem.columnIndex
      var rowIndex = rowItem.rowIndex
      if (columnIndex === 0) {
        console.log(row)
        console.log(rowIndex)
        if (rowIndex === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        } else if (rowIndex === 3) {
          return {
            rowspan: 12,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    radioUp(label) {
      var taoIndex = this.taoList.indexOf(this.formModel.tao);
      var realTime = this.yueList.indexOf(this.formModel.time);
      var priceDan = this.priceList[taoIndex]
      this.nowFuList = this.fuList[taoIndex]
      this.price = priceDan * (realTime + 1)
    }
  },
  mounted() {

  },
  watch: {
    formModel: {
      handler(newValue, oldValue) {
        console.log('change')
        this.$forceUpdate();
      },
      deep: true
    }
  }
}
</script>
<style lang='less' scoped>
.table-content {
  width: 100vw;
  height: 300vh;
}

.form {
  margin-top: 20px;
}

.fu-list {
  margin-top: 20px;

  .fu-title {
    font-size: 24px;
    font-weight: bolder;

  }

  .fu-body {
    margin-left: 60px;

    .fu-item {
      font-size: 16px;
      line-height: 30px;

    }
  }
}

.buy-btn {
  margin-left: 50px;
}

.price-content {
  display: flex;

  .price-title {
    font-size: 24px;
    font-weight: bolder;
  }

  .price-num {
    color: #eb7f39;
    font-size: 24px;
    font-weight: bolder;
  }
}
</style>
